<template>
  <div class="cloud-gaming-container">
    <!-- 游戏分类标签栏 -->
    <div class="category-tabs">
      <div class="category-label">游戏分类</div>
      <el-tabs v-model="activeCategory" class="custom-tabs" @tab-click="handleCategoryChange">
        <template v-for="value in sourceList">
          <el-tab-pane :label="value.name" :name="value.id"></el-tab-pane>
        </template>
      </el-tabs>
    </div>

    <!-- 游戏列表展示区域 -->
    <div class="games-grid">
      <!-- 游戏结果网格 -->
      <el-card v-for="(game, index) in games" :key="index" class="game-card" shadow="never">
        <GameCard :game="game" @play="handleGamePlay" />
      </el-card>

      <!-- <el-row :gutter="20" class="games-grid">
        <el-col v-for="(game, index) in games" :key="index" class="game-col">
          <div class="game-card">
            <div class="game-cover">
              <img :src="game.coverUrl" :alt="game.title" class="cover-img">
            </div>

            <div class="game-info">
              <h4 class="game-title">{{ game.title }}</h4>
              <p class="game-desc">{{ game.slogan }}</p>

              <span class="game-tags" @click="navigateToGameDetail(game.id)"
                v-if="game.cornerMarkers && game.cornerMarkers.length > 0 && game.cornerMarkers[0] == 2">
                <span class="play-now-tag">
                  <el-icon>
                    <img src="@/assets/svgs/thunder.svg" alt="秒玩图标" />
                  </el-icon>
                  秒玩
                </span>
                <span class="account-tag">
                  需要账号
                </span>
              </span>

              <span class="game-tag-now" @click="navigateToGameDetail(game.id)" v-else>
                <span class="play-now-tag">
                  <el-icon>
                    <img src="@/assets/svgs/thunder.svg" alt="秒玩图标" />
                  </el-icon>
                  秒玩
                </span>
              </span>
            </div>
          </div>
        </el-col>
      </el-row> -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getTagList, getGameListByTag } from '@/api/gaming';
import GameCard from '@/components/GameCard.vue'

// 路由实例
const router = useRouter()
// 响应式数据
const activeCategory = ref('all')
const games = ref([])
const sourceList = ref([])

// 处理分类切换
const handleCategoryChange = (tab, event) => {
  activeCategory.value = tab.props.name;
  getGames();
}

onMounted(() => {
  // 获取标签列表
  getTags();
})

// 获取标签列表
const getTags = () => {
  getTagList().then(res => {
    sourceList.value = res.tags || [];
    activeCategory.value = sourceList.value[0].id;
    getGames();
  }).catch(err => { })
}

// 获取游戏列表
const getGames = () => {
  var panams = {
    "page": 1,
    "rows": 10,
    "tagId": activeCategory.value
  };
  getGameListByTag(panams).then(res => {
    games.value = res.games || [];
  }).catch(err => { })
}
const navigateToGameDetail = (id) => {
  router.push({
    path: `/cloudGaming/detail/${id}`,
  })
}

// 处理游戏播放事件
const handleGamePlay = (game) => {
  // 这里可以添加额外的游戏播放处理逻辑
  console.log('游戏播放事件:', game.title)
}
</script>

<style lang="scss" scoped>
.cloud-gaming-container {
  display: flex;
  flex-direction: column;

  // 游戏分类标签样式
  .category-tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border-radius: 4px;
    background-color: #232527;

    .category-label {
      color: #888;
    }

    .custom-tabs {
      flex: 1;

      :deep(.el-tabs__header) {
        border-bottom: none;
        margin: 0;

        .el-tabs__nav-wrap {
          .el-tabs__nav {

            border-color: #ffd700;
            border-radius: 4px;


            .el-tabs__item {
              // width: 90px;
              height: 32px;
              line-height: 32px;
              color: #fff;
              opacity: 0.9;
              background-color: #2E3033;
              border-radius: 4px;
              padding: 0 20px;
              margin-right: 10px;
              box-sizing: border-box;
              border: 1px solid transparent;

              &.is-active {
                color: #ffe500 !important;
                border: 1px solid #ffe500;
              }

              &:hover {
                color: #ffffff;
              }
            }
          }

          &:after {
            background-color: transparent !important;
          }

          .el-tabs__active-bar {
            background-color: transparent !important;
          }
        }
      }

      :deep(.el-tabs__content) {
        display: none;
      }
    }
  }

  // 游戏展示区域
  .games-display-area {
    flex: 1;

    // 游戏网格样式
    // .games-grid {
    //   .game-col {
    //     margin-top: 40px;

    //     .game-card {
    //       border-radius: 4px;
    //       overflow: hidden;
    //       transition: transform 0.3s ease, box-shadow 0.3s ease;
    //       cursor: pointer;

    //       &:hover {
    //         transform: translateY(-4px);
    //         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    //       }

    //       .game-cover {
    //         position: relative;
    //         overflow: hidden;

    //         .cover-img {
    //           width: 100%;
    //           height: 132px;
    //           display: block;
    //           object-fit: cover;
    //           transition: transform 0.3s ease;
    //         }

    //         &:hover .cover-img {
    //           transform: scale(1.05);
    //         }
    //       }

    //       .game-info {
    //         .game-title {
    //           font-size: 18px;
    //           font-weight: 600;
    //           color: #ffffff;
    //           margin: 20px 0 8px 0;
    //           //css文字超出隐藏变省略号
    //           text-overflow: ellipsis;
    //           overflow: hidden;
    //           white-space: nowrap;
    //         }

    //         .game-desc {
    //           color: #888;
    //           margin: 0 0 12px 0;
    //           line-height: 1.5;
    //         }

    //         .game-tags {
    //           width: 134px;
    //           height: 32px;
    //           display: flex;
    //           align-items: center;
    //           justify-content: center;
    //           background: #232527;
    //           border-radius: 4px;
    //           color: #fff;
    //           font-size: 14px;

    //           .play-now-tag {
    //             width: 60px;
    //             font-weight: bold;
    //             position: relative;
    //             display: flex;
    //             align-items: center;

    //             &::after {
    //               content: ' ';
    //               position: absolute;
    //               top: 50%;
    //               right: 0;
    //               transform: translate(-50%, -50%);
    //               width: 1px;
    //               height: 12px;
    //               background-color: #6d6d6d;
    //               margin: 0 7px;
    //             }
    //           }

    //           .account-tag {
    //             color: #ff9320;
    //           }
    //         }

    //         .game-tag-now {
    //           width: 70px;
    //           height: 32px;
    //           display: flex;
    //           align-items: center;
    //           justify-content: center;
    //           background: #232527;
    //           border-radius: 4px;
    //           color: #fff;
    //           font-size: 14px;
    //         }
    //       }
    //     }
    //   }
    // }
  }

  .games-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}
</style>